<template>
  <div class="mb70 container trading-record-details">
    <p class="bread">
      <a href="#/index/trading-record">平台交易记录</a> >
      <a href="javascript:void(0);" class="font-s-18">详情</a>
    </p>
    <h3>订单号：{{id}}</h3>
    <div class="bg-c-fff box-border content">
      <h3>客户信息</h3>
      <div class="box">
        <p><span>企业名称：</span>{{account}}</p>
        <p><span>地址：</span>{{address}}</p>
        <p><span>电话：</span>{{phone}}</p>
        <p><span>邮箱：</span>{{email}}</p>
      </div>
    </div>
    <div class="bg-c-fff box-border content">
      <table width="100%">
        <tr>
          <th>申请企业服务信息</th>
          <th>名称</th>
          <th>套餐次数-剩余次数</th>
          <th>套餐时间-剩余时间</th>
          <th>金额</th>
          <th>支付方式</th>
        </tr>
        <tr>
          <td><img src="../assets/day.png"></td>
          <td>{{type| typeFilter}}</td>
          <td>{{surplusNumbere()}}</td>
          <td>{{getDays()}}</td>
          <td>￥{{amount| moneyFilter}}</td>
          <td>{{payType| payTypeFilter}}</td>
        </tr>
      </table>
    </div>
    <div class="bg-c-fff box-border content">
      <h3>发票信息</h3>
      <div class="paper-box invoice-box auto" v-show="this.billActive===1">
        <h4>纸质普通发票</h4>
        <ul>
          <li><span class="dib">发票抬头</span>
            <input type="text" readonly="readonly" v-model="header">
          </li>
          <li><span class="dib">纳税人识别号</span>
            <input type="text" readonly="readonly" v-model="taxpayerNumber">
          </li>
        </ul>
        <p class="head">联系人信息</p>
        <ul>
          <li><span class="dib">联系人</span>
            <input type="text" readonly="readonly" v-model="contacts">
          </li>
          <li><span class="dib">联系电话</span>
            <input type="text" readonly="readonly" v-model="billPhone">
          </li>
          <li><span class="dib vt">配送地址</span>
            <textarea type="text" readonly="readonly" name="" v-model="billAdress"></textarea>
          </li>
        </ul>
      </div>
      <div class="electronics-box invoice-box auto" v-show="this.billActive===2">
        <h4>电子普通发票</h4>
        <ul>
          <li><span class="dib">发票抬头</span>
            <input type="text" readonly="readonly" v-model="header">
          </li>
          <li><span class="dib">纳税人识别号</span>
            <input type="text" readonly="readonly" v-model="taxpayerNumber">
          </li>
        </ul>
        <p class="head">联系人信息</p>
        <ul>
          <li><span class="dib">收票人手机</span>
            <input type="text" readonly="readonly" v-model="billPhone">
          </li>
          <li><span class="dib">收票人邮箱</span>
            <input type="text" readonly="readonly" v-model="billEmail">
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      billActive: '',
      details: [],
      id: '',
      type: '',
      account: '',
      address: '',
      phone: '',
      email: '',
      amount: '',
      payType: '',
      surplusNumber: '',
      totalNumber: '',
      orderTime: '',
      surplusTime: '',
      header: '',
      taxpayerNumber: '',
      contacts: '',
      billPhone: '',
      billAdress: '',
      billEmail: ''
    }
  },
  mounted() {
    this.$http.get('/transactionRecord/read/detail', {
      params: {
        id: this.$route.query.id
      }
    }).then(data => {
      if (data.data.httpCode === 200) {
        this.details = data.data.data
        this.id = this.details.id
        this.type = this.details.type
        this.account = this.details.busniess.account
        this.address = this.details.busniess.address.replace(/,/g, '')
        this.phone = this.details.busniess.phone
        this.email = this.details.busniess.email
        this.totalNumber = this.details.totalNumber
        this.surplusNumber = this.details.surplusNumber
        this.surplusTime = this.details.surplusTime
        this.orderTime = this.details.orderTime
        this.payType = this.details.payType
        this.amount = this.details.amount
        this.billActive = this.details.invoice.type
        this.header = this.details.invoice.header
        this.taxpayerNumber = this.details.invoice.taxpayerNumber
        this.contacts = this.details.invoice.contacts
        this.billPhone = this.details.invoice.phone
        this.billAdress = this.details.invoice.address.replace(/,/g, '') + this.details.invoice.detailAdd
        this.billEmail = this.details.invoice.email
      } else {
        console.log(data.data.msg)
        this.$toasted.show(data.data.msg)
      }
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    surplusNumbere() {
      if (!this.totalNumber) {
        return '--'
      }
      var frequency = this.totalNumber - this.surplusNumber
      if (this.totalNumber === -1) {
        return '不限'
      }
      if (frequency <= 0) {
        return this.totalNumber + '次 - ' + '0次'
      } else {
        return this.totalNumber + '次 - ' + this.surplusNumber + '次'
      }
    },
    getDays() {
      if (!this.surplusTime) {
        return '--'
      }
      var dayNumber = Math.floor((new Date().getTime() - (new Date(this.orderTime)).getTime()) / 1000 / 60 / 60 / 24)
      var difference = this.surplusTime - dayNumber
      if (this.surplusTime === -1) {
        return '不限'
      }
      if (difference <= 0) {
        return this.surplusTime + '天 - ' + '0天'
      } else {
        return this.surplusTime + '天 - ' + difference + '天'
      }
    }
  },
  filters: {
    typeFilter(t) {
      if (t === 3) {
        return '交易监控套餐'
      } else if (t === 2) {
        return '法律服务'
      }
    },
    moneyFilter(m) {
      return (m / 100).toFixed(2) + '元'
    },
    surplusTimeFilter(t) {
      if (t === -1) {
        return '不限'
      }
      if (!t) {
        return '--'
      } else if (t < 0) {
        return '不限'
      } else {
        return t
      }
    },
    payTypeFilter(pt) {
      if (pt === 1) {
        return '微信'
      } else if (pt === 2) {
        return '支付宝'
      } else if (pt === 3) {
        return '储蓄卡'
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.container {
  margin-top: 20px;
}

.box-border {
  border: 1px solid #ddd;
}

h3 {
  padding-left: 40px;
}

h3,
.trading-record-details .content h3 {
  line-height: 40px;
}

.trading-record-details .content {
  margin-bottom: 20px;
}

.trading-record-details .content h3 {
  border-bottom: 1px solid #ddd;
}

.trading-record-details .content:nth-of-type(1) .box {
  padding: 10px 0 10px 40px;
  line-height: 30px;
}

.trading-record-details .content th {
  background-color: #fff;
  color: #626262;
  border-bottom: 1px solid #ddd;
}

.trading-record-details .content table img {
  margin-top: 35px;
}

.invoice-box {
  width: 460px;
  border: 1px solid #ddd;
  margin: 40px auto;
}

.invoice-box h4 {
  background-color: #d8e7ff;
  padding-left: 30px;
  line-height: 40px;
  font-size: 15px;
}

.invoice-box ul {
  padding: 20px 30px 0 30px;
}

.invoice-box ul li {
  margin-bottom: 20px;
}

.invoice-box p.head {
  background-color: #eae9e9;
  line-height: 35px;
  padding-left: 30px;
}

.invoice-box span {
  width: 100px;
}

.invoice-box input {
  border: 1px solid #ddd;
  height: 33px;
  line-height: 33px;
  width: 293px;
  padding: 0 10px;
}

.invoice-box textarea {
  width: 293px;
  padding: 5px;
}

</style>
